<nz-card>
  <div class="common-search-wrap">
    <div class="common-search-forms">
      <div class="common-form-item">
        <label class="common-search-label">用户</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入ID/昵称/手机号" [(ngModel)]="seachParams.user" />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">帖子标题</label>
        <div class="common-search-conrol">
          <input nz-input placeholder="请输入帖子标题" [(ngModel)]="seachParams.title" />
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">板块</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="seachParams.boardId"
            (ngModelChange)="boardChange($event)">
            <nz-option
              *ngFor="let item of plateOptions"
              [nzLabel]="item.boardName"
              [nzValue]="item.id">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item">
        <label class="common-search-label">类型</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="seachParams.boardTypeId">
            <nz-option
              *ngFor="let item of postTypeOptions"
              [nzLabel]="item.typeName"
              [nzValue]="item.id">
            </nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">发布身份</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="seachParams.identity">
            <nz-option nzLabel="普通账号" [nzValue]="0"></nz-option>
            <nz-option nzLabel="内部账号" [nzValue]="1"></nz-option>
            <nz-option nzLabel="管理员" [nzValue]="2"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">帖子状态</label>
        <div class="common-search-conrol">
          <nz-select
            nzShowSearch
            nzAllowClear
            nzPlaceHolder="全部"
            [(ngModel)]="seachParams.status">
            <nz-option nzLabel="草稿" [nzValue]="0"></nz-option>
            <nz-option nzLabel="已发表" [nzValue]="1"></nz-option>
            <nz-option nzLabel="已下架" [nzValue]="2"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">问题状态</label>
        <div class="common-search-conrol">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="全部" [(ngModel)]="seachParams.issueStatus">
            <nz-option nzLabel="非问题" [nzValue]="0"></nz-option>
            <nz-option nzLabel="问题待处理" [nzValue]="1"></nz-option>
            <nz-option nzLabel="问题已解决" [nzValue]="2"></nz-option>
            <nz-option nzLabel="问题跟进中" [nzValue]="3"></nz-option>
            <nz-option nzLabel="问题已记录" [nzValue]="4"></nz-option>
            <nz-option nzLabel="无效问题" [nzValue]="5"></nz-option>
          </nz-select>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">创建时间</label>
        <div class="common-search-conrol">
          <nz-range-picker [(ngModel)]="establishDates" (ngModelChange)="onChange($event, 0)"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item" [hidden]="!isCollapse">
        <label class="common-search-label">发表时间</label>
        <div class="common-search-conrol">
          <nz-range-picker [(ngModel)]="publishDates" (ngModelChange)="onChange($event, 1)"></nz-range-picker>
        </div>
      </div>

      <div class="common-form-item">
        <button nz-button nzType="primary" class="m-r-8" (click)="queryData()">查询</button>
        <button nz-button nzType="default" (click)="resetData()">重置</button>
        <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
          {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
        </button>
      </div>
    </div>
  </div>
</nz-card>

<nz-card>
  <nz-space>
    <button *nzSpaceItem nz-button nzType="primary" [routerLink]="['/business-circle/postsRelease', -1]">
      <i nz-icon nzType="plus" nzTheme="outline"></i>发表帖子
    </button>
  </nz-space>

  <!-- Table -->
  <div class="pagination-wrap-position table-wrap">
    <nz-table
      #basicTable
      nzSize="small"
      nzShowSizeChanger
      nzShowQuickJumper
      nzOuterBordered
      [nzScroll]="{ x: '1200px' }"
      [nzFrontPagination]="false"
      [nzLoadingDelay]="100"
      [nzLoading]="tableForms.tableLoading"
      [nzData]="tableData"
      [nzPageSizeOptions]="[5, 10, 20, 50, 100]"
      [nzTotal]="tableForms.total"
      [nzPageIndex]="tableForms.page"
      [nzPageSize]="tableForms.pageSize"
      [nzShowTotal]="totalTemplate"
      (nzPageIndexChange)="onPageIndexChange($event)"
      (nzPageSizeChange)="onPageSizeChange($event)"
      (nzQueryParams)="onQueryParamsChange($event)"
    >
      <thead>
        <tr>
          <th nzLeft nzAlign="center" nzWidth="120px">帖子ID</th>
          <th nzAlign="center" nzWidth="120px">用户ID</th>
          <th nzAlign="center" nzWidth="150px">昵称</th>
          <th nzAlign="center" nzWidth="120px">手机号码</th>
          <th nzAlign="center" nzWidth="300px">帖子标题</th>
          <th nzAlign="center" nzWidth="120px">板块类型</th>
          <th nzAlign="center" nzWidth="120px">板块</th>
          <th nzAlign="center" nzWidth="120px">类型</th>
          <th nzAlign="center" nzWidth="120px">发布身份</th>
          <th nzAlign="center" nzWidth="120px">帖子状态</th>
          <th nzAlign="center" nzWidth="120px">问题状态</th>
          <th nzAlign="center" nzWidth="100px" nzColumnKey="browse_num" [nzSortFn]="true">浏览数</th>
          <th nzAlign="center" nzWidth="100px" nzColumnKey="praise_num" [nzSortFn]="true">点赞数</th>
          <th nzAlign="center" nzWidth="100px" nzColumnKey="comment_num" [nzSortFn]="true">评论数</th>
          <th nzAlign="center" nzWidth="180px" nzColumnKey="create_time" [nzSortFn]="true">创建时间</th>
          <th nzAlign="center" nzWidth="180px" nzColumnKey="release_time" [nzSortFn]="true">发表时间</th>
          <th nzAlign="center" nzWidth="180px" nzColumnKey="comment_time" [nzSortFn]="true">最新回复时间</th>
          <th nzRight nzAlign="center" nzWidth="300px">操作</th>
        </tr>
      </thead>

      <tbody>
        <tr *ngFor="let data of basicTable.data; let index = index;">
          <!-- 帖子ID -->
          <td nzAlign="center" nzLeft>{{ data.id }}</td>
          <!-- 用户ID -->
          <td nzAlign="center">{{ data.userId }}</td>
          <!-- 昵称 -->
          <td nzAlign="center">{{ data.userName || '-' }}</td>
          <!-- 手机号码 -->
          <td nzAlign="center">{{ data.phone || '-' }}</td>
          <!-- 帖子标题 -->
          <td nzAlign="center" nzBreakWord>{{ data.title || '-' }}</td>
          <!-- 板块类型 -->
          <td nzAlign="center">{{ data.boardTypeNames || '-' }}</td>
          <!-- 板块 -->
          <td nzAlign="center">{{ data.boardName || '-' }}</td>
          <!-- 类型 -->
          <td nzAlign="center">{{ data.boardTypeName || '-' }}</td>
          <!-- 发布身份 -->
          <td nzAlign="center">{{ data.identity | publishIdentityStatus }}</td>
          <!-- 帖子状态 -->
          <td nzAlign="center">{{ data.status | postsTypeStatus }}</td>
          <!-- 问题状态 -->
          <td nzAlign="center">{{ data.issueStatus | problemTypeStatus }}</td>
          <!-- 浏览数 -->
          <td nzAlign="center">{{ (data.browseNum || data.browseNum == 0) ? data.browseNum : '-' }}</td>
          <!-- 点赞数 -->
          <td nzAlign="center">{{ (data.praiseNum || data.praiseNum == 0) ? data.praiseNum : '-' }}</td>
          <!-- 评论数 -->
          <td nzAlign="center">{{ (data.commentNum || data.commentNum == 0) ? data.commentNum : '-' }}</td>
          <!-- 创建时间 -->
          <td nzAlign="center">{{ data.createTime || '-' }}</td>
          <!-- 发表时间 -->
          <td nzAlign="center">{{ data.releaseTime || '-' }}</td>
          <!-- 最新回复时间 -->
          <td nzAlign="center">{{ data.commentTime || '-' }}</td>
          <td nzAlign="center" nzRight>
            <a
              nz-button
              nzType="link"
              nz-popconfirm
              [nzPopconfirmTitle]="data.topFlag == 0 ? '确定置顶?' : '确定取消置顶?'"
              [nzIcon]="iconTpl0"
              (nzOnConfirm)="modifyData(data, 0)">
              {{ data.topFlag == 0 ? '置顶' : '取消置顶' }}
            </a>
            <ng-template #iconTpl0>
              <i nz-icon nzType="question-circle-o" style="color: red;"></i>
            </ng-template>
            <button nz-button nzType="link" [routerLink]="['/business-circle/postsDetails', data.id]">查看</button>
            <button *ngIf="data.boardTypeNames == '系统'" nz-button nzType="link" [routerLink]="['/business-circle/postsRelease', data.id]">编辑</button>
            <!-- <button nz-button nzType="link" [routerLink]="['/business-circle/postsRelease', data.id]" *ngIf="data.status == 0 && (data.identity == 1 || data.identity == 3)">编辑</button> -->
            <a
              *ngIf="data.status == 1"
              nz-button
              nzType="text"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="是否确定要下架该帖子，下架后不再在前端展示!"
              [nzIcon]="iconTpl"
              (nzOnConfirm)="modifyData(data, 1)">下架</a>
            <ng-template #iconTpl>
              <i nz-icon nzType="question-circle-o" style="color: red;"></i>
            </ng-template>
            <a
              *ngIf="data.status == 0 || data.status == 2"
              nz-button
              nzType="text"
              nzDanger
              nz-popconfirm
              nzPopconfirmTitle="是否要删除帖子，删除后将无法找回!"
              [nzIcon]="iconTpl2"
              (nzOnConfirm)="modifyData(data, 2)">删除</a>
            <ng-template #iconTpl2>
              <i nz-icon nzType="question-circle-o" style="color: red;"></i>
            </ng-template>
          </td>
        </tr>
      </tbody>
    </nz-table>

    <!-- 分页template -->
    <ng-template #totalTemplate let-total>共有 {{ tableForms.total }} 条</ng-template>
  </div>
</nz-card>